<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
            <el-form :inline="true" v-model="myform"  class="demo-form-inline">
              <el-form-item label="关键词:">
                <el-input v-model="myform.keywords"  placeholder="请输入关键词"></el-input>
              </el-form-item>
              <el-form-item label="客户名称:">
                <el-input v-model="myform.customname"  placeholder="请输入客户名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
              </el-form-item>
            </el-form>
        	<br />
            <template>
              <el-table
                :data="protalDate"
                border
                style="width: 100%">
                <el-table-column
                  prop="keyword.id" align="center"
                  label="序号"
                  >
                </el-table-column>
                <el-table-column
                  prop="keyword.keywords" align="center"
                  label="门户名称"
                  >
                </el-table-column>
                <el-table-column
                  prop="keyword.customname" align="center"
                  label="客户名称">
                </el-table-column>
                <el-table-column
                  prop="custom.bossname" align="center"
                  label="法人代表">
                </el-table-column>
                <el-table-column
                  prop="keyword.agentname" align="center" width="140"
                  label="代理商">
                </el-table-column>
                <el-table-column
                  align="center" width="170"
                  label="注册日期">
                  <template slot-scope="scope">{{scope.row.keyword.regdatetime|moment('YYYY-MM-DD HH:mm:ss')}}</template>
                </el-table-column>
                <el-table-column
                  prop="custom.customtypename" align="center"
                  label="类型">
                </el-table-column>
                <el-table-column
                  align="center"
                  label="状态">
                  <template slot-scope="scope">{{scope.row.keyword.isuse==1?'已使用':'未使用'}}</template>
                </el-table-column>
                <el-table-column
                  align="center" width="200"
                  label="操作">
                  <template slot-scope="scope">
                      <el-button type="primary" @click="$router.push('/lookPortal?id='+scope.row.keyword.id)">查看</el-button>
                      <el-button type="infor" @click="$router.push('/editPortal?id='+scope.row.keyword.id)">修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <template>
                <div class="block">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[5, 10, 15, 20]"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                  </div>
            </template>
            </div>
    </div>
</template>

<script>
    import {queryKeywords} from '@/api/getData'
	import headTop from '../components/headTop'
    import {baseUrl} from '@/config/env'
    export default {
        data() {
          return {
              myform:{
                  keywords:'',customname:''
              },
              total:0,
              pageSize:5,
               currentPage: 1,
           protalDate:[]
          }
        },
    	components: {
    		headTop,
    	},
        created() {
            this.getData();
        },
        methods:{
            search(){
                this.currentPage=1;
                this.getData();
            },
           async getData(){
               const res = await queryKeywords({pageNum:this.currentPage,pageSize:this.pageSize,...this.myform});
               this.protalDate=res.keywords;
               this.total=res.total;
            },
             handleSizeChange(val) {
                 this.pageSize=val;
                    this.getData();
                  },
                  handleCurrentChange(val) {
                       this.currentPage=val;
                   this.getData();
                  }
        }
    }
</script>

<style lang="less">
	@import '../style/mixin';
    .table_container {
    	padding: 20px;
    }
</style>
